<template>
  <div class="management-merchant views-container">
    <div class="wlm-table">
      <div class="wlm-dialog-content">
        <!-- :ref="formFormatData.key"
          :model="formFormatData.formData" -->
        <el-form
          size="small"
          label-width="160px"
          class="retail-form"
          label-position="right"
          :ref="formFormatData.key"
          :model="formFormatData.formData"
        >
          <el-form-item label="代理名称" prop="sort">
            <el-input
              v-model.trim="formFormatData.formData.agentname"
              style="width:40%;"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="真实姓名" prop="sort">
            <el-input
              v-model.trim="formFormatData.formData.realname"
              style="width:40%;"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="联系电话" prop="sort">
            <el-input
              v-model.trim="formFormatData.formData.mobile"
              style="width:40%;"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="登录账号" prop="sort">
            <el-input
              v-model.trim="formFormatData.formData.username"
              style="width:40%;"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="账号密码" prop="sort">
            <el-input
              v-model.trim="formFormatData.formData.password"
              style="width:40%;"
              show-password
            >
            </el-input>
          </el-form-item>
          <el-form-item label="到期时间" prop="sort">
            <!-- <el-date-picker
                    v-model="formFormatData.formData.endtime"
                    type="date"
                    placeholder="选择日期">
                  </el-date-picker> -->
            <el-date-picker
              :picker-options="disabledDateOptions"
              v-model="formFormatData.formData.endtime"
              value-format="timestamp"
              type="datetime"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="地区等级" prop="sort">
            <el-radio-group v-model="formFormatData.formData.level">
              <el-radio :label="1">一级</el-radio>
              <el-radio :label="2">二级</el-radio>
              <el-radio :label="3">三级</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="运营地区" class="city">
            <div class="flex-row flex-align-c">
              <city-selects
                :config="initCityList"
                ref="cityselect"
                @on-change = "onchange"
                :level="formFormatData.formData.level"
                :changeEvt="formFormatFiltersChange"
              ></city-selects>
            </div>
          </el-form-item>
          <el-form-item label="微信收款人" prop="cash_uid">
                <span v-if="tagdata.length>0">
                  <el-tag v-for="item in tagdata" :key="item"  closable @close="handleClose(item)">
                    {{item}}
                  </el-tag>
                  </span>
                <span v-else>
                  <chooseUser :config="initChooseUser" ref="chooseUser" :changeEvt="userChange">
            </chooseUser>
                </span> 
          </el-form-item>
          <el-form-item label="商家提现平台提成" prop="sort">
            <el-input
              @input.native="
                clearNativeReg(formFormatData.formData, 'virtual_sales')
              "
              v-model.trim="formFormatData.formData.bus_percent"
              style="width:20%;"
            >
              <template slot="append">%</template>
            </el-input>
          </el-form-item>
             <el-form-item label="商家入账金额冻结天数" prop="sort" >
                  <el-input-number :controls="false"  placeholder="请输入入账金额冻结天数" :min="0" v-model.trim="formFormatData.formData.settlement_withdrawal_day">
                            </el-input-number>
                            <div class="form-help">注：订单入账后在设置时间内将冻结入账金额，过了此时间解冻方可提现，0代表不设置</div>
          </el-form-item>
          <el-form-item label="代理提现平台提成" prop="sort">
            <el-input
              @input.native="
                clearNativeReg(formFormatData.formData, 'virtual_sales')
              "
              v-model.trim="formFormatData.formData.agent_percent"
              style="width:20%;"
            >
              <template slot="append">%</template>
            </el-input>
          </el-form-item>
          <el-form-item label="是否启用" prop="sort">
            <el-switch
              :inactive-value="0"
              :active-value="1"
              v-model="formFormatData.formData.status"
            ></el-switch>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div v-cloak class="wlm-fixed-btn flex-row flex-align-c flex-justify-c">
      <!-- @click="formFormatSubmit({ router: { type: 'replace', path: '/merchant/goodshopcarousel', code: 1 }})" -->
      <el-button size="small" @click="savebtn" type="primary">保存</el-button>
      <router-link tag="span" to="/application/agentlist">
        <el-button size="small">返回</el-button>
      </router-link>
    </div>
  </div>
</template>
<script>
import { saveAgentUser, getAgentUser } from "@/api/cityagent";
import mixins from "@/mixins/mixins";
import ChooseUser from '@/components/ChooseUser/index'
import CitySelects from '@/components/CitySelects/index'
export default {
  mixins: [mixins.getters("Form")],
  name: "agentadd",
  components:{
    ChooseUser,
    CitySelects
  },
  data() {
    return {
      tagdata:[],
      initChooseUser: {
        closable: true,
        initList: []
      },
      disabledDateOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;
        }
      },
     
      initCityList: {
        initList: [],
        bindKey: { key: [{ 'name': 'province', type: 'String' }, { 'name': 'city', type: 'String' }, { 'name': 'town', type: 'String' }], model: 'address' }
      },
      formFormatData: {
        key: "agentadd",
        model: {
          noCreateEdit: false,
          bindDialog: "dialogTableVisible"
        },
        api: {
          editForm: {
            api: getAgentUser, // 编辑获取表单信息
            params: {
              id: ""
            },
            filters: {
              address: {
                bindInit: ['initCityList']
              },
            },
            redirect: "id"
          },
          // submitForm:saveAgentUser, // 编辑提交，新增提交
        },
        formData: {
          province: {},
          city: {},
          town: {},
          cash_nickname:'',
          agentname: "",
          realname: "",
          mobile: "",
          username: "",
          password: "",
          endtime: "",
          cash_uid: "",
          bus_percent: "",
          settlement_withdrawal_day:'',
          agent_percent: "",
          level: 1,
          status: 1
        }
        // rules: {
        //   sort: [{
        //     required: true,
        //     message: '请输入轮播排序',
        //     trigger: 'blur'
        //   }],
        //   title: [{
        //     required: true,
        //     message: '请输入标题',
        //     trigger: 'blur'
        //   }],
        //   image: [{
        //     required: true,
        //     message: '请选择图片',
        //     trigger: 'blur'
        //   }]
        // }
      }
    };
  },
  created () {
     this.$nextTick(() => {
       if(this.$route.query.id){
          this.getAgentUserbtn()
       }
     })
  },
  methods: {
    onchange(val){
      console.log("2121321fdshfdsfdfs",val)
      this.formFormatData.formData.province={
        id:val[0]
      }
      this.formFormatData.formData.city={
        id:val[1]
      }
      this.formFormatData.formData.town={
        id:val[2]
      }
    },
    handleClose(tag){
      this.tagdata.splice(this.tagdata.indexOf(tag),1)
  
    },
  //  formFormatFiltersChange(data){
  //         this.formFormatData.formData.province = data[0]
  //        this.formFormatData.formData.city = data[1]
  //        this.formFormatData.formData.town = data[2]
  //  },
    savebtn() {
      saveAgentUser(this.formFormatData.formData).then(res => {
        if (res.data.code == 1) {
          console.log("fsdfdfdfds", res);
          this.$message.success("保存成功")
           this.$router.push("/application/agentlist")
        }
      });
    },
    getAgentUserbtn(){
      getAgentUser({id:this.$route.query.id}).then(res=>{
        if(res.data.code==1){
          this.formFormatData.formData = res.data.data
          this.tagdata.push(res.data.data.cash_nickname)
          // this.formFormatData.formData.cash_uid = res.data.data.cash_uid
          // this.formFormatData.formData.cash_nickname = res.data.data.cash_nickname
          this.initCityList.initList.push(res.data.data.province,res.data.data.city,res.data.data.town)
        }
      })
    },
    userChange(userlist) {
      const [item] = userlist
      console.log("44444433",userlist)
      console.log(":::::::",item.user_id)
      this.formFormatData.formData.cash_uid = item? item.user_id:''
      this.formFormatData.formData.cash_nickname =item? item.nickName:''
    },
    
  }
};
</script>
<style lang="scss" scoped>
// /deep/.el-input__inner{
//     width: 220px;
// }
.form-help {
  color: #999;
  line-height: 14px;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 400;
}
</style>
